import { mount } from 'vue-test-utils'
import opLogBtn from 'src/views/button/src/opLogBtn.vue'

describe('opLogBtn', () => {
  it('基础属性用例: { bizId , bizKey, action, columns, title, tableHeight, width, hasPagination, btntype, queryBody }', () => {
    // 使用mount可以创建一个包涵被挂载和渲染的一个实例
    const vm = mount(opLogBtn, {
      propsData: {
        bizId: 'id',
        bizKey: 'key',
        action: 'api',
        columns: [{}],
        title: '点击事件弹出弹窗标题',
        tableHeight: '300px',
        width: '200px',
        hasPagination: true,
        btntype: 'text',
        queryBody: {
          req: true
        }
      }
    })
    expect(vm.props().bizId).to.be.equal('id')
    expect(vm.props().bizKey).to.be.equal('key')
    expect(vm.props().action).to.be.equal('api')
    expect(JSON.stringify(vm.props().columns)).to.be.equal('[{}]')
    expect(vm.props().title).to.be.equal('点击事件弹出弹窗标题')
    expect(vm.props().tableHeight).to.be.equal('300px')
    expect(vm.props().width).to.be.equal('200px')
    expect(vm.props().hasPagination).to.be.equal(true)
    expect(vm.props().btntype).to.be.equal('text')
    expect(vm.html().includes(`type="text"`)).to.be.equal(true)
    expect(vm.props().queryBody.req).to.be.equal(true)
    expect(vm.text()).to.be.equal('操作记录')
  })

  it('插槽用例', async () => {
    // 使用mount可以创建一个包涵被挂载和渲染的一个实例
    const vm = mount(opLogBtn, {
      propsData: {
        bizId: 'id',
        bizKey: 'key',
        action: 'api',
        columns: [{ type: 'index' }, { prop: 'name', label: '姓名' }],
        title: '点击事件弹出弹窗标题',
        tableHeight: '300px',
        width: '80%',
        hasPagination: true,
        btntype: 'text',
        queryBody: {
          req: true
        }
      },
      slots: {
        default: '<span>操作记录插槽按钮</span>'
      }
    })
    expect(vm.text()).to.be.equal('操作记录插槽按钮')
    expect(vm.html().includes('<span>操作记录插槽按钮</span>')).to.be.equal(true)
  })

  it('事件用例：1、没有传入自定义列表 2、弹框点击确认 3. 高度以及宽度使用百分比', async () => {
    // 使用mount可以创建一个包涵被挂载和渲染的一个实例
    const vm = mount(opLogBtn, {
      propsData: {
        bizId: 'id',
        bizKey: 'key',
        action: 'api',
        title: '点击事件弹出弹窗标题',
        tableHeight: '80%',
        width: '80%',
        hasPagination: true,
        btntype: 'text',
        queryBody: {
          req: true
        }
      },
      mocks: {
        // 不用真的模拟弹框，只管入参是否正确
        $popup: (component, query) => {
          return new Promise((resolve, reject) => {
            expect(query.columns.length > 0).to.be.equal(true) // 没有传入自定义列表为默认columns,默认columns长度肯定>0
            expect(query.queryBody.key).to.be.equal('id')        // bizKey = bizId
            expect(query.queryBody.req).to.be.equal(true)
            expect(query.title).to.be.equal('点击事件弹出弹窗标题')
            expect(query.tableHeight).to.be.equal('80%')
            expect(query.width).to.be.equal('80%')
            expect(query.hasPagination).to.be.equal(true)
            expect(query.action).to.be.equal('api')
            resolve()
          })
        },
        $x: {
          tablePopup: 'component'
        }
      }
    })
    await vm.trigger('click')
    await vm.vm.$nextTick()
    expect('resolve' in vm.emitted()).to.be.equal(true)  // 点击确认，则触发 resolve
    expect('reject' in vm.emitted()).to.be.equal(false)  // 点击确认，则不触发 reject
  })

  it('事件用例：1、传入自定义列表 2、弹框点击取消', async () => {
    // 使用mount可以创建一个包涵被挂载和渲染的一个实例
    const vm = mount(opLogBtn, {
      propsData: {
        bizId: 'id',
        bizKey: 'key',
        action: 'api',
        columns: [{ type: 'index' }, { prop: 'name', label: '姓名' }],
        title: '点击事件弹出弹窗标题',
        tableHeight: '300px',
        width: '80%',
        hasPagination: true,
        btntype: 'text',
        queryBody: {
          req: true
        }
      },
      mocks: {
        // 不用真的模拟弹框，只管入参是否正确
        $popup: (component, query) => {
          return new Promise((resolve, reject) => {
            expect(query.columns[0].type).to.be.equal('index') // 自定义列表
            expect(query.queryBody.key).to.be.equal('id')      // bizKey = bizId
            expect(query.queryBody.req).to.be.equal(true)
            expect(query.title).to.be.equal('点击事件弹出弹窗标题')
            expect(query.tableHeight).to.be.equal('300px')
            expect(query.width).to.be.equal('200px')
            expect(query.hasPagination).to.be.equal(true)
            expect(query.action).to.be.equal('api')
            reject()
          })
        },
        $x: {
          tablePopup: 'component'
        }
      }
    })
    await vm.trigger('click')
    await vm.vm.$nextTick()
    expect('reject' in vm.emitted()).to.be.equal(true)    // 点击确认，则触发 reject
    expect('resolve' in vm.emitted()).to.be.equal(false)  // 点击确认，则不触发 resolve
  })
})
